<template>
	<view class="simple-home">
		<!-- 顶部搜索栏 -->
		<view class="header">
			<u-search :show-action="false"></u-search>
			<u-divider custom-style="margin: 1rpx;"></u-divider>
			<Selectorfilter @filterwhere="getfilterwhere"></Selectorfilter>
		</view>
		<view>
			<!-- 下拉刷新区域 -->
			<scroll-view scroll-y class="scroll-view" :style="{flex: 1,height: scrollHeight + 'px'}"
				:refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh"
				@scrolltolower="loadMore">
				<view class="goods-list">
					<view v-for="item in goodsList" :key="item.id" class="goods-item" @click="goToGoodsDetail(item)">
						<image :src="item.image" mode="aspectFill" :key="item.id"  class="goods-image"></image>
						<view class="goods-info">
							<text class="goods-title u-line-2">{{item.name}}</text>
							<view class="price-box">
								<text class="current-price">¥{{item.price}}</text>
								<text class="sold">已售{{item.sales}}件</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多提示 -->
				<u-loadmore :status="loadStatus" :load-text="{
			  loadmore: '上拉加载更多',
			  loading: '正在加载...',
			  nomore: '没有更多了'
			}" margin-top="20" margin-bottom="20" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
	import Selectorfilter from '@/components/filter-sort';
	export default {
		components: {
			Selectorfilter
		},
		data() {
			return {
				scrollHeight: 0, // 滚动区域高度
				refreshing: false, // 下拉刷新状态
				loadStatus: 'loadmore', // 加载更多状态
				currentPage: 1, // 当前页码
				pageSize: 8, // 每页商品数量

				// 轮播图数据
				bannerList: [{
						id: 1,
						image: 'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c94.png',
						link: '/pages/goods/detail?id=1001',
						title: "昨夜星辰昨夜风，画楼西畔桂堂东"
					},
					{
						id: 2,
						image: 'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c95.png',
						link: '/pages/goods/detail?id=1002',
						title: "昨夜星辰昨夜风，画楼西畔桂堂东"
					},
					{
						id: 3,
						image: 'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c96.png',
						link: '/pages/goods/detail?id=1003',
						title: "昨夜星辰昨夜风，画楼西畔桂堂东"
					}

				],
				// 商品列表数据
				goodsList: []
			}
		},
		onLoad() {
			//计算滚动条高度
			const systemInfo = uni.getSystemInfoSync()
			this.scrollHeight = systemInfo.windowHeight
			// 初始化加载数据
			this.loadGoodsList();
		},
		methods: {
			getfilterwhere(e) {
				console.log('fliter', e);
			},
			// 加载商品列表
			async loadGoodsList() {
				uni.showLoading({
					title: '加载中...'
				});
				 try {
					const res = await httpsend('getgoodslist');
					if (res?.code === 1) {
						this.goodsList = res.data;
					} else {
						this.$api.msg(res.msg);
					}
					uni.hideLoading();
				 } catch (err) {
					console.log('err', err);
					uni.hideLoading();
				 }
			},

			// 下拉刷新
			onRefresh() {
				console.log('刷新');
				this.refreshing = true;
				this.currentPage = 1;
				this.loadGoodsList();
			},

			// 上拉加载更多
			loadMore() {
				this.loadStatus='nomore';
			},

			// 跳转到商品详情
			goToGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goodsinfo/goodsdetail?id=${item.id}`
				});
			},

			// 点击轮播图
			goToBannerLink(item) {
				uni.navigateTo({
					url: `/pages/goodsinfo/goodsdetail?id=${item.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.simple-home {
		// background-color: #f7f7f7;
		// padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		height: 95vh;
		overflow: hidden;
	}

	.header {
		height: 180rpx;
		/* 上方固定高度 */
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
	}

	.goods-item {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;

		.goods-image {
			width: 100%;
			height: 300rpx;
		}

		.goods-info {
			padding: 16rpx;

			.goods-title {
				font-size: 26rpx;
				color: #333;
				height: 72rpx;
				line-height: 36rpx;
				margin-bottom: 10rpx;
			}

			.price-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.current-price {
					font-size: 30rpx;
					color: #e74c3c;
					font-weight: bold;
				}

				.sold {
					font-size: 22rpx;
					color: #999;
				}
			}
		}
	}
</style>